<template>
  <div class="Intraweekalarmstatistics">
    <base-echart
      ref="chartRef"
      :show-no-data="true"
      :options="state.Intraweekalarmstatistics"
      :height="props.cheight"
    />
  </div>
</template>

<script setup lang="ts">
import { Intraweekalarmstatistics } from "./config/config";
import {
  reactive,
  ref,
  computed,
  onMounted,
  nextTick,
  onUnmounted,
  defineProps,
} from "vue";
import { cloneDeep } from "lodash-es";

import { getGeneralValues } from "@/api/general";
import { useIds } from "@/stores/screen/ids";
import { getRenderDate } from "@/utils/tool";
const props = defineProps({
  cheight: {
    type: String,
    default: "260",
  },
});

const { getsessionStorage } = useIds();
const state = reactive<any>({ Intraweekalarmstatistics });
const initDataOption = {
  // legend: { data: [] as any },
  series: [{ data: [] as any }, { data: [] as any }, { data: [] as any }],
  xAxis: [{ data: [] as any }],
};
const valueCode = [
  { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_INFO", name: "一般" },
  { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_WARN", name: "告警" },
  { code: "AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_ERROR", name: "紧急" },
];
const getchartsData = () => {
  let reqData = [];
  valueCode.forEach((item: any) => {
    reqData.push({
      code: item.code,
      params: { equipmentIds: getsessionStorage() },
    });
  });
  getGeneralValues(reqData).then((res) => {
    let resData = res.data;
    let s1 = resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_INFO"]
      ? resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_INFO"].data
      : [];
    let s2 = resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_WARN"]
      ? resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_WARN"].data
      : [];
    let s3 = resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_ERROR"]
      ? resData["AI_ALERT_MESSAGE_DETAIL_LAST_7_DAY_ERROR"].data
      : [];
    // *

    let s1Value = [];
    let s2Value = [];
    let s3Value = [];
    const dates = getPastSevenDaysFormatted();

    s1Value = matchValuesByDate(dates, s1);

    s2Value = matchValuesByDate(dates, s2);

    s3Value = matchValuesByDate(dates, s3);

    formatOptions(s1Value, s2Value, s3Value, dates);
  });
};
const formatOptions = (s1Value: any, s2Value: any, s3Value: any, date: any) => {
  const dataOption = cloneDeep(initDataOption);

  dataOption.series[0].data = s1Value;
  dataOption.series[1].data = s2Value;
  dataOption.series[2].data = s3Value;
  dataOption.xAxis[0].data = date;

  nextTick(() => {
    state.Intraweekalarmstatistics = dataOption;
  });
};

const getPastSevenDaysFormatted = (): string[] => {
  const today = new Date();
  const pastSevenDays = [];

  for (let i = 0; i < 7; i++) {
    const day = new Date(today);
    day.setDate(today.getDate() - i);
    const formattedDate = `${(day.getMonth() + 1)
      .toString()
      .padStart(2, "0")}-${day
      .getDate()
      .toString()
      .padStart(2, "0")}`;
    pastSevenDays.unshift(formattedDate);
  }

  return pastSevenDays;
};
const replaceData = (data) => {
  let dataValue = "";
  dataValue = data.split("-")[1] + "-" + data.split("-")[2];
  return dataValue;
};
const matchValuesByDate = (dates: any, data: any) => {
  let result = [];

  for (let i = 0; i < dates.length; i++) {
    for (let j = 0; j < data.length; j++) {
      if (data[j] && replaceData(data[j].x) == dates[i]) {
        result.push(data[j].y);
      }
    }
    if (!result[i]) {
      result.push(0);
    }
    // if (found) {
    //   result.push(found.y);
    // } else {
    //   result.push(0);
    // }
  }

  return result;
};
const pollingTimer = ref();
const setPollingTimer = () => {
  pollingTimer.value && clearInterval(pollingTimer.value);
  pollingTimer.value = setInterval(() => {
    getchartsData();
  }, 30000);
};
onMounted(() => {
  getchartsData();
  setPollingTimer();
});
onUnmounted(() => {
  pollingTimer.value && clearInterval(pollingTimer.value);
});
</script>

<style scoped lang="scss">
.Intraweekalarmstatistics {
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-weight: 600;
}
</style>
